<template>
  <div class="box">
    <div class="header" style="">
      <!-- <div style="width: 0.4rem">
        <van-icon
          name="wap-nav"
          color="white"
          size=".37rem"
          style="padding-left: 0.03rem; padding-top: 0.03rem"
          @click="zuo"
        />
      </div> -->
      <div style="width: 0.4rem">
        <select
          style="
            width: 40px;
            height: 100%;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            padding-left: 6px;
            background-color: #c82519;
            color: white;
            border: none;
          "
        >
          <option
            style="font-size: 10px"
            v-for="(item, index) in city"
            :key="index"
          >
            {{ item.name }}
          </option>
        </select>
      </div>
      <div class="header-center" @click="gosearch">
        <img
          style="width: 0.3rem; height: 0.2rem"
          src=""
          alt=""
        />
        <span
          style="margin-top: -0.06rem; margin-left: 0.1rem; font-size: 0.16rem"
          >|&nbsp;oppo手机</span
        >
      </div>
      <div
        style="
          width: 0.6rem;
          line-height: 0.44rem;
          color: white;
          padding-left: 5px;
        "
        @click="toLogin"
      >
        {{ msg }}
      </div>
    </div>
    <div class="main" @scroll="scrollMe" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imgurl" />
          </van-swipe-item>
        </van-swipe>
        <div class="top10">
          <van-grid :column-num="5" :border="false" :icon-size="35" :gutter="0">
            <van-grid-item
              v-for="item in navList"
              :key="item.navid"
              :icon="item.imgurl"
              :text="item.title"
            />
          </van-grid>
        </div>
        <div class="top10">
          <ul class="up">
            <li class="left">
              <span class="haigou">京东秒杀</span>
              <span class="node"
                >16<img
                  style="width: 16px; height: 16 px"
                  src="https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png"
                  alt=""
              /></span>
              <van-count-down :time="time" class="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </li>
            <li>
              <span class="fanqie">爆款轮番秒></span>
            </li>
          </ul>
          <ul class="seckill">
            <li
              v-for="(c, index) in seckillList"
              :key="index"
              @click="jumpTo(item.proid)"
            >
              <van-image width="60" height="60" :src="c.img" />
              <p class="active">￥{{ c.originprice }}</p>
            </li>
          </ul>
        </div>
        <div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul :class="isShow ? 'prolist2' : 'prolist1'">
              <li
                v-for="(item, index) in proList"
                :key="index"
                @click="jumpTo(item.proid)"
              >
                <img width="100%" :src="item.img1" alt="" />
                <div>
                  <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
                  <p class="prices">￥{{ item.originprice }}</p>
                </div>
              </li>
              <div class="toggle" @click="isShow = !isShow">
                <van-icon name="bars" v-if="isShow" />
                <van-icon name="apps-o" v-else />
              </div>
            </ul>
          </van-list>
        </div>
      </van-pull-refresh>
      <div class="top" v-if="scrollTop > 700" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBannerList,
  getNavList,
  getSeckillList,
  getProList,
} from "../api/home";
// import {goSortCity} from "../api/city";
import {goCity,goSortCity} from "../api/city";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Image as VanImage,
  List,
  Icon,
  PullRefresh,
  Toast,
} from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);
Vue.use(Toast);
export default {
  name: "Home",
  components: {},
  data() {
    return {
      city: [],
      navList: [],
      bannerList: [],
      time: 24 * 60 * 60 * 600,
      seckillList: [],
      proList: [],
      isShow: true,
      loading: false,
      finished: false,
      count: 2,
      isLoading: false,
      scrollTop: 0,
      timer: null,
      msg: "登录",
    };
  },
  methods: {
    // zuo() {
    //   // this.$router.push("/kind")
    // },
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        getProList({ count: this.count, limitNum: 12 }).then((data) => {
          console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.proList = [...this.proList, ...data.data.data]; // this.prolist = 原有的数据+ 新加载出来的数据
            this.count++;
          }
        });
      }, 1500);
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
      // his.$router.push({ path: "/detail", params: { proid } });
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then((data) => {
          //  加载的第一页
          this.proList = data.data.data;
          this.count = 4;
        });
      }, 1000);
    },
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
    toLogin() {
      if (!localStorage.getItem("token")) {
        this.$router.push("/login");
      } else {
        Toast("您已登录，请勿重新登录！");
      }
    },
    gosearch() {
      this.$router.push("/search");
    },
  },
  created() {
    if (localStorage.getItem("token")) {
      this.msg = "已登录";
    }
    //排序前
    goCity().then((res) => {
      console.log(res.data);
      this.city = res.data;
    });
    //排序后
    goSortCity().then((res) => {
      console.log(res);
      this.city = res.data;
    });
    // 获取数据
    getBannerList().then((res) => {
      this.bannerList = res.data;
    });
    getNavList().then((res) => {
      this.navList = res.data;
    });
    getSeckillList().then((res) => {
      console.log(res.data);
      this.seckillList = res.data;
    });
    // getSeckillList().then((res) => {
    //   console.log(res.data.data);
    //   this.seckillList = res.data.data;
    // });
    getProList({ count: this.count, limitNum: 12 }).then((data) => {
      console.log(data.data.data);
      this.proList = data.data.data;
    });
  },
};
</script>
<style scoped>
.header {
  background-color: #c82519;
  display: flex;
  justify-content: space-between;
}
.header-center {
  display: flex;
  height: 0.3rem;
  flex: 1;
  line-height: 0.3rem;
  background-color: white;
  padding: 0.05rem 0.1rem;
  border-radius: 0.4rem;
  margin-top: 0.06rem;
  color: gray;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  height: 1.8rem;
  border-radius: 10px;
}
.my-swipe img {
  height: 100%;
}
.seckill {
  overflow: auto;
}
.top10 {
  margin-top: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
  border-radius: 10px;
}
.up {
  background: url("");
  background-size: 100% 0.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.haigou {
  font-size: 14px;
  box-sizing: border-box;
  padding: 0.05rem;
}
.node {
  font-size: 14px;
  color: red;
  padding: 0.05rem;
}
.colon {
  display: inline-block;
  margin: 0.03rem 0.035rem;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 1px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
.left {
  display: flex;
  align-items: center;
}
.fanqie {
  font-size: 14px;
  color: red;
  padding: 10px;
}
.seckill {
  height: 0.9rem;
  display: flex;
  justify-content: space-between;
  /* border-radius: 10px; */
}
.active {
  color: red;
}
.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.prolist1 li {
  width: 49%;
  height: 100%;
  margin-top: 5px;
  border-radius: 10px;
  background-color: #fff;
}
.prolist1 li img {
  border-radius: 10px;
}
.prolist2 li {
  height: 1rem;
  display: flex;
  margin-top: 5px;
  border-radius: 10px;
  background-color: #fff;
}
.prolist2 li img {
  width: 30%;
  height: 0.9rem;
  border-radius: 10px;
}
.prices {
  margin-top: 0.32rem;
  /* margin-bottom: -10px; */
  color: #ee0a24;
}
.prolist2 li div {
  flex: 1;
}
/* h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
} */
/* .price {
  color: red;
  margin-bottom: 0;
} */
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.top {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
</style>
